<template>
	<view class="earning">
		<xbd-pages-content title="我的收益">
		<template #content>
			<view class="earning">
				<view class="top" >
					<view class="tab">
						<view :class="['tabs', tabs==='1' ? 'active' : '']" @click="changeTab('1')">
							我的工资条
						</view>
						<view :class="['tabs', tabs==='2' ? 'active' : '']"  @click="changeTab('2')">
							日清日结
						</view>
						<view :class="['tabs', tabs==='3' ? 'active' : '']"  @click="changeTab('3')">
							年度累计
						</view>
					</view>

				</view>
				<view class="">
					<view class="bg_top">
						-
					</view>
					<EarningMy v-if="tabs === '1'" :itemInfo='detail'></EarningMy>
					<EarningDay v-else-if="tabs==='2'" :itemInfo='detail'></EarningDay>
					<EarningYear v-else-if="tabs==='3'" :itemInfo='detail' :chart='chart'></EarningYear>
					<view v-if="tabs === '3' ">
						<view class="br">
							<xbd-title  title="工资趋势：近12个月"></xbd-title>
							<view class="chart1">
								<chart-super-line-area  :chartData="visitorAppointment"></chart-super-line-area>
							</view>
						</view>
			
					</view>
				</view>
			</view>
		</template>
		</xbd-pages-content>
	</view>
</template>

<script>
	import { Earning } from '@/api/index.js';
	import EarningMy from '@/components/earnings/earningsMy.vue';
	import EarningDay from '@/components/earnings/earningsDay.vue';
	import EarningYear from '@/components/earnings/earningsYear.vue';

	export default {
		components: {
			EarningMy,
			EarningDay,
			EarningYear,
		},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				current:'',
				tabs:'1',
				detail:{},
				chart:{},
				qurInfo:{
					date:"",
					type:'my'
				},
				visitorAppointment: {
					unit:'元',
					name: '合计实发工资',
					color: '#457AFF',
					x: 'x',
					y: 'y',
					data: [
					]
				},
			}
		},
		methods: {
			changeTab(num){
				this.tabs = num;
				if(num==='1'){
					this.qurInfo.type = 'my'
				}else if(num==='2'){
					this.qurInfo.type = 'today'
				}else if(num==='3'){
					this.qurInfo.type = 'year'
					this.getChart()
				}
				this.qurInfo.date = this.getDate();
				this.getDetail()
			},
			async getDetail() {
		    	try {
		    		this.$showLoading('加载中');
		    		const res = await Earning.getShowList(this.qurInfo);
					
					this.detail = res.data
					uni.hideLoading();
					
		    	}catch(e) {
		    		uni.hideLoading();
		    	}
		    },
			async getChart() {
		    	try {
		    		// this.$showLoading('加载中');
		    		const res2 = await Earning.getChartList();
		    		// uni.hideLoading();
		    		
		    		this.visitorAppointment.data = res2.data.chart
		    	}catch(e) {
		    		uni.hideLoading();
		    	}
		    },
			getDate(type) {
			    const date = new Date();
			    let year = date.getFullYear();
			    let month = date.getMonth() + 1;
			    let day = date.getDate();
				
			    if (type === 'start') {
			        year = year - 60;
			    } else if (type === 'end') {
			        year = year + 2;
			    }
			    
			    
				if(this.tabs === '1'){
					if (month === 1){
						year = year - 1
						month = 12
					}
					month = (month-1) > 9 ? month - 1 : '0' + (month - 1);
					return `${year}-${month}`;
				}else if(this.tabs==='2'){
					if (day === 1){
						var preDate = new Date(date.getTime() - 24*60*60*1000)
						day = preDate.getDate()
						month = month - 1
					}
					if (month === 0){
						year = year - 1
						month = 12
					}
					month = (month-1) > 9 ? month - 1 : '0' + (month - 1);
					day = (day-1) > 9 ? day-1 : '0' + (day-1);
					return `${year}-${month}-${day}`;
					
				}else{
					return `${year}`;
				}
			    
			},
			eventCallback(obj){
				this.date = obj;
				this.qurInfo.date = obj
				this.getDetail()
			}
		},

		onLoad() {
			this.qurInfo.date = this.getDate();
			uni.$on('changemonth', this.eventCallback);
			uni.$on('changeyear', this.eventCallback);
			uni.$on('changeday', this.eventCallback);
			this.getDetail()
		},
		onUnload() {
			uni.$off('changemonth', this.eventCallback);
			uni.$off('changeyear', this.eventCallback);
			uni.$off('changeday', this.eventCallback);
		},
	}
</script>

<style lang="scss" scoped>
	.earning {
		.top {
			font-size: 32rpx;
			position: fixed;
			top: 0;
			padding: 20px 50rpx 0 50rpx;
			width: 750rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			z-index: 999;
			.tab{
				display: flex;
				justify-content: space-between;
				.tabs{
					padding-bottom: 20px;
					&.active{
						color: #457AFF;
						box-sizing: border-box;
						border-bottom: 2px solid #457AFF;
					}
				}
			}

		}
		.bg_top{
			font-size: 32rpx;
			padding: 20px 50rpx;
			box-sizing: border-box;
			color: #f8f8f8;
		}
		.br{
			padding-top: 20rpx;
			background-color: #FFFFFF;
		}
		.chart1{
			background-color: #FFFFFF;
			height: 180px;
			width: 750rpx;
		}
	}
</style>
